<!-- 私有分类 -->
<template>
  <div class="tab6">
    <!-- 按纽栏组件 -->
    <div class="button-group">
      <a-button type="primary" icon="plus" @click="clickButton('add')" class="icon-button">一级</a-button>
      <a-button type="primary" icon="plus" @click="clickButton('addChild')" class="icon-button">子级</a-button>
      <a-button icon="edit" @click="clickButton('edit')" class="icon-button">编辑</a-button>
      <a-button icon="delete" @click="clickButton('del')" class="icon-button">删除</a-button>
    </div>
    <div class="tab6-tree">
      <a-tree
        show-line
        :treeData="treeData"
        defaultExpandAll>
      </a-tree>
    </div>

    <!-- 私有分类弹出框 -->
    <a-modal
      :maskClosable="false"
      :title="modalCatalogTitle"
      v-model="dialogCatalogVisible"
      @ok="handleOk">
      <a-form
        :label-col="{ span: 6 }"
        :wrapper-col="{ span: 18 }"
        :form="form">
        <a-form-item label="分类代码">
          <a-input v-decorator="[ 'Catalog_Code' ]" />
        </a-form-item>
        <a-form-item label="分类名称">
          <a-input v-decorator="[ 'Catalog_Name' ]" />
        </a-form-item>
        <a-form-item label="级别">
          <a-input type="number" v-decorator="[ 'Catalog_Level' ]" />
        </a-form-item>
        <a-form-item label="顺序号">
          <a-input type="number" v-decorator="[ 'Catalog_Order' ]" />
        </a-form-item>
        <a-form-item label="是否降序">
          <a-checkbox v-decorator="[ 'Catalog_IsDesc', { valuePropName: 'checked', initialValue: true } ]" />
        </a-form-item>
        <a-form-item label="是否展开">
          <a-checkbox v-decorator="[ 'IsExpanded', { valuePropName: 'checked', initialValue: true } ]" />
        </a-form-item>
        <a-form-item label="分类备注">
          <a-input type="textarea" v-decorator="[ 'Catalog_Remark' ]" />
        </a-form-item>
      </a-form>
    </a-modal>
  </div>
</template>

<script>
export default {
  name: '',
  components: {
  },
  data () {
    return {
      treeData: [ // 私有分类数据
        {
          title: 'CE 测试小分类',
          key: '1',
          children: [
            {
              title: '小分类1',
              key: '1-1'
            },
            {
              title: '小分类2',
              key: '1-2'
            }
          ]
        }
      ],
      modalCatalogTitle: '', // 私有分类弹框标题
      dialogCatalogVisible: false, // 私有分类弹框是否显示
      form: this.$form.createForm(this)
    }
  },
  created () {},
  mounted () {},
  methods: {
    clickButton (val) {
      switch (val) {
        case 'add':
          this.modalCatalogTitle = '新增私有分类'
          this.dialogCatalogVisible = true
          this.form.resetFields() // 表单清空
          break
        case 'addChild':
          this.modalCatalogTitle = '新增私有分类'
          this.dialogCatalogVisible = true
          this.form.resetFields() // 表单清空
          break
        case 'edit':
          this.modalCatalogTitle = '编辑私有分类'
          this.dialogCatalogVisible = true
          break
        case 'del':
          var this_ = this
          this.$confirm({
            title: '提示',
            content: '此操作将永久删除该文件, 是否继续?',
            okText: '确认',
            cancelText: '取消',
            onOk () {
              this_.$message.success('删除成功')
            }
          })
          break
        default:
          break
      }
    },
    handleOk () {}
  }
}
</script>

<style lang="less" scoped>
.tab6 {
  height: 100%;
  padding: 15px;
  .button-group {
    margin-bottom: 10px;
  }
  .tab6-tree {
    height: calc(100% - 42px);
  }
}
</style>
